<template>
  <div class="detail">
    <!-- 头部 -->
    <top></top>
    <!-- 内容区 -->
    <div class="detailContainer">
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" indicator-color="white" loop :autoplay="3000">
        <van-swipe-item
          v-for="(img, index) in skuInfo.skuImageList"
          :key="img.id"
        >
          <img :src="img.imgUrl" alt="" />
        </van-swipe-item>
      </van-swipe>

      <!-- 价格信息 -->
      <div class="bannerContent">
        <div class="bannerprice">
          <p>首页福利返 最高可100%返还</p>
          <div class="priceArea">
            <div class="price">
              <span>¥</span>
              <span class="big">{{ price }}</span>
            </div>
            <div class="finalPrice">
              <span>立返</span>
              <span>¥</span>
              <span class="big">88元</span>
            </div>
          </div>
        </div>
        <img :src="skuInfo.skuDefaultImg" alt="" />
      </div>

      <!-- 介绍 -->
      <div class="detailBaseInfo">
        <div class="baseInfo">
          <van-row>
            <van-col span="16"
              ><div class="name">
                {{ skuInfo.skuName }}
              </div></van-col
            >
            <van-col span="8">
              <div class="wrap">
                <span class="number">99.6%</span>
                <span>好评率</span>
                <van-icon name="arrow" /></div
            ></van-col>
          </van-row>
        </div>
      </div>

      <!-- 信息 -->
      <van-cell is-link title="邮费: 满20包邮" @click="news = true" />
      <van-action-sheet v-model="news" title="邮费">
        <div class="content">
          本商品由严选自营仓发货，单笔订单金额（不含邮费）大陆地区满99元免邮费，不满99元收取8元邮费；港澳台地区满500元免邮费，不满500元收取30元邮费；海外地区以下单页提示运费为准。
        </div>
      </van-action-sheet>
      <van-cell is-link title="请选择规格数量" @click="show = true" />

      <!-- 商品属性选择框 -->
      <van-action-sheet v-model="show" title="加入购物车" class="addCartCard">
        <!-- 顶部 -->
        <div class="header">
          <img :src="skuInfo.skuDefaultImg" alt="" />
          <div class="info">
            <p>价格: ￥{{ price }}</p>
            <p>已选择：请选择规格商品</p>
            <!-- <van-divider /> -->
          </div>
        </div>
        <!-- 属性与数量 -->
        <div class="attrAndCount">
          <!-- 尺码和颜色 -->
          <div class="u-formart">
            <div
              class="chooseArea"
              v-for="(spu, index) in spuSaleAttrList"
              :key="spu.id"
            >
              <div class="choosed"></div>
              <dl>
                <dt class="title">{{ spu.saleAttrName }}</dt>
                <dd
                  :class="{ active: spuList.isChecked == 1 }"
                  @click="
                    handlerIsChecked(spu.spuSaleAttrValueList, spuList.id)
                  "
                  v-for="(spuList, index) in spu.spuSaleAttrValueList"
                  :key="spuList.id"
                >
                  {{ spuList.saleAttrValueName }}
                </dd>
              </dl>
            </div>
          </div>
          <!-- 数量 -->
          <div class="number">
            <div>数量</div>
            <van-stepper
              v-model="value"
              class="count"
              input-width="80px"
              button-size="40px"
            />
          </div>
        </div>
        <!-- 底部 -->
        <div class="footer">
          <van-icon name="service-o" class="server" size="30" />
          <van-button type="danger" class="btn" @click="addShopCart"
            >加入购物车</van-button
          >
        </div>
      </van-action-sheet>

      <!-- 图片列表 -->
      <div
        class="imageList"
        v-for="(img, index) in skuInfo.skuImageList"
        :key="img.id"
      >
        <van-image :src="img.imgUrl" alt="" />
      </div>
    </div>

    <!-- 底部 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button
        type="danger"
        text="加入购物车"
        @click="show = true"
      />
    </van-goods-action>
  </div>
</template>

<script>
import { Notify } from "vant";
import { mapGetters } from "vuex";
import myRandom from "@/utils/ramdom";
export default {
  name: "Detail",
  data() {
    return {
      news: false,
      show: false, //购物车
      value: "", //数量
      skuId: "", //商品id
    };
  },

  mounted() {
    this.skuId = this.$route.query.id;
    // console.log(this.skuId)
    let arr = [12, 20, 3, 13, 2, 31];
    let index = myRandom(0, arr.length - 1);
    this.skuId = arr[index];
    //获取产品数据
    this.getDatailListData(this.skuId);
  },
  computed: {
    ...mapGetters(["price", "spuSaleAttrList", "skuInfo"]),
  },

  methods: {
    getDatailListData(skuId) {
      this.$store.dispatch("getDatailListData", skuId);
    },

    // 切换数据
    handlerIsChecked(list, id) {
      list.forEach((item) => {
        item.isChecked = 0;
      });
      list.find((item) => item.id === id).isChecked = 1;
    },

    // 跳转到购物车
    onClickIcon() {
      this.$router.push("/cart");
    },
    // 添加数据到购物车
    async addShopCart() {
      // 整理数据
      if (!this.$store.state.user.token) {
        this.$router.push("/login?redirect=/detail");
        return;
      }
// console.log('zxxx...');
      try {
        await this.$store.dispatch("addOrUpdateCart", {
          skuId: this.skuId,
          skuNum: this.value,
        });
        Notify({ type: "success", message: "添加购物车成功" });
      } catch (error) {
        Notify({ type: "danger", message: '添加购物车失败，请稍后再试' });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.detail {
  overflow-y: hidden;
  overflow-x: hidden;
}
.detailContainer {
  height: 560px;
  overflow-y: scroll;
  overflow-x: hidden;
  // 轮播图
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    height: 320px;
    img {
      width: 100%;
      height: 100%;
      vertical-align: middle;
    }
  }

  // 价格信息
  .bannerContent {
    height: 84px;
    background: red;
    margin-top: -24px;
    padding: 10px 20px;
    color: #fff;
    display: flex;
    // flex-wrap: wrap;
    overflow: hidden;
    // 数据信息
    .bannerprice {
      width: 285px;
      align-items: cneter;
      margin-top: 10px;
      p {
        width: 160px;
        font-size: 12px;
      }
      .priceArea {
        display: flex;
        .price {
          width: 70px;
          .big {
            font-size: 36px;
            font-weight: bold;
          }
        }
        .finalPrice {
          width: 90px;
          font-size: 13px;
          height: 26px;
          background: white;
          text-align: center;
          line-height: 26px;
          border-radius: 20px;
          margin-left: 25px;
          margin-top: 5px;
          color: red;
          .big {
            font-size: 20px;
          }
        }
      }
    }
    // 图片
    img {
      width: 75px;
      height: 40px;
      text-align: center;
      margin-top: 40px;
    }
  }

  // 数据信息
  .detailBaseInfo {
    padding: 10px;
    font-size: 16px;
    .name {
      font-weight: bold;
    }
    .wrap {
      width: 80px;
      height: 35px;
      margin-left: 40px;
      .van-icon {
        margin-top: 10px;
        font-size: 14px;
      }
      span {
        font-size: 15px;
        display: block;
        float: left;
        &.number {
          color: red;
        }
      }
    }
  }

  // 活动
  .content {
    padding: 16px 16px 160px;
    font-size: 13px;
  }

  // 商品属性选择框
  .addCartCard {
    height: 480px;
    display: flex;
    flex-direction: column;
    .header {
      height: 100px;
      padding: 10px;
      display: flex;
      img {
        height: 100px;
        width: 100px;
      }
      .info {
        padding-top: 15px;
        font-size: 15px;
        margin-left: 15px;
        p {
          &:first-child {
            color: #dd1a21;
          }
        }
      }
    }

    // 属性
    .attrAndCount {
      flex: 1;
      overflow: scroll;
      padding: 10px;
      .chooseArea {
        line-height: 20px;
        dl {
          overflow: hidden;
          font-size: 15px;
          dt {
            margin-right: 15px;
          }
          dd {
            float: left;
            color: #333;
            line-height: 25px;
            padding: 2px 10px;
            border: 1px solid #333;
            border-radius: 5px;
            margin-inline-start: 10px;
            cursor: pointer;
            &.active {
              color: red;
              border: 1.5px solid red;
            }
          }
        }
      }
      .number {
        font-size: 15px;
        .count {
          margin-top: 10px;
        }
      }
    }

    // 底部
    .footer {
      display: flex;
      align-items: center;
      height: 50px;
      background-color: #fafafa;
      border-top: 1px solid #ddd;
      .server {
        margin: 0 20px;
      }
      .btn {
        flex: 1;
        height: 100%;
      }
    }
  }

  // 图片列表
  .imageList {
    width: 100%;
    .van-image {
      width: 100%;
      margin-bottom: 3px;
    }
  }
}
</style>